[#ftl]
 
  [@define "agile.chart.Parallelogram"  "agile._Component,agile._Resizable" ]		
	widgetName:"Parallelogram"
	[#assign templateString][#compress] 		
 		<div class='agileComponent agileParallelogram'> </div>
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"	
	,resizeAxis:"xy"
	,templateMap:{
		dojo:"<div {id} {html-style} {html-parameters}>{innerWidets}</div>"
		,agile:"<div data-dojo-type='{declaredClass}' data-dojo-props='{style-props}'>{innerWidets}</div>"
	}	
	,attributes:agile.delegate(agile._Component.prototype.attributes,{
		width:lang.mixin({},agile.NumberMetadata,{
			unit:"px"
			,onValueChange:function(widget,name,value){				
				widget.metadata("style.width",value);
				widget.metadata("parameters.width",value);
				style.set(widget.domNode,{width:value});
			}
			,_ignore:true
		})
		,height:lang.mixin({},agile.NumberMetadata,{
			unit:"px"
			,onValueChange:function(widget,name,value){				
				widget.metadata("style.height",value);
				widget.metadata("parameters.height",value);
				style.set(widget.domNode,{height:value});
			}
			,_ignore:true
		})
		,angle:lang.mixin({},agile.NumberMetadata,{
				unit:"",lable:agile.i18n("left_bottom_angle",null,"(left bottom)Angle")
				,onValueChange:function(widget,name,value){				
					widget.metadata("style.transform",lang.replace("skew(-{0}deg,0deg)",value));
					//agile.adviseCssName4Js("transform");
					style.set(widget.domNode,{transform:widget.metadata("style.transform")});
				}
				,_ignore:true
			})
	})	
	,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
//		"border":lang.mixin({},agile.MetadataConstraint,{ignore:function(ownerWidget,sourceType){ return this._ignore || sourceType == "agile";}})
	})
	,initDefaultMetadata:function(){
//		this.metadata("parameters.radius",50);
		this.metadata("style.width","120px");
		this.metadata("style.height","120px");
		//this.metadata("style.border-radius","50% 50% 50% 50%/50% 50% 50% 50%");
		this.metadata("style.border","thin solid #808080");	
		
		this.metadata("style.transform-origin","left bottom");	
		this.metadata("style.transform","skew(-30deg,0deg)");
		
	}
	,init:function(){

	}	
	,getResizableTargetContainer:function(){				
		return this.domNode;		 
	}
[/@]
